/**
 * 类组件-生命周期
 * 1. 挂载时（创建时）
 * 执行顺序：1. 执行constructor()=>new 实例化 2. render()=》渲染模版 3. componentDidMount()
 * 2. 更新时
 * 执行顺序：1. render()=>刷新页面 2. componentDidUpdate()=>更新完成执行
 * 3. 销毁时
 */
import React, { Component } from 'react'

// 子组件
class Child extends Component {

  // 组件销毁时执行
  componentWillUnmount () {
    // 作用：清除定时器/事件解绑
    console.log('组件销毁了！')
  }


  render () {
    return (
      <div>
        <h1>类子组件</h1>
      </div>
    )
  }
}



class App extends Component {
  constructor() {
    super()
    // 执行几次？只执行一次
    console.log('1. 执行constructor()=>new 实例化')
    // 作用：1. 定义state响应数据 2. 事件处理函数的this绑定
    this.state = {
      a: 0,
      // 是否显示
      isShow: false
    }
  }

  // 首次加载执行（一次）
  componentDidMount () {
    // 执行几次？只执行一次
    console.log('3. 组件已经显示到页面：componentDidMount()')
    // 作用：1. 操作DOM 2. 发送ajax请求
  }

  // 更新了：就执行（多次）
  /**
   * 
   * @param {*} prevProps 上一次的props值
   * @param {*} prevState 上一次的state值
   */
  componentDidUpdate (prevProps, prevState) {
    console.log('4. 组件更新了', prevProps, prevState)
    // 作用：1. 操作DOM 2. 发送ajax请求
    // 不能在这里直接修改数据=>死循环
    // this.setState({
    //   a: 1
    // })
  }



  // 更新时：点击加一
  handlerAdd = () => {
    this.setState({
      a: Math.random() * 100,
      // 控制组件是否显示
      isShow: !this.state.isShow
    })
  }

  handlerForce = () => {
    this.forceUpdate()
  }

  render () {
    // 避免在这里更改数据=》死循环
    // this.setState({
    //   a: 1
    // })
    // 数据变化：多次执行
    console.log('2. render()=》渲染模版')
    const { a, isShow } = this.state
    return (
      <div>
        <h1>生命周期</h1>
        <p>{a}</p>
        <button onClick={this.handlerAdd}>触发更新</button>
        <button onClick={this.handlerForce}>强制更新</button>
        <hr />
        {
          isShow ? <Child /> : null
        }
      </div>
    )
  }
}

export default App
